<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="line" style="width: 800px;height: 600px;"></div>
    <div style="height: 40px;"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
    <script>
        //折线图
        const lineOption = {
            title: {
                text: '折线图示例',
                subtext: '纯属虚构',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销售额',
                    data: [],
                    stack: 'Total',
                    type: 'line'
                }
            ]
        };

        var lineDom = document.getElementById('line');
        var myLine = echarts.init(lineDom);

        fetch("/admin/selectMonthCost").then(resp => resp.json()).then(res => {
            //折线图
            const date = res.obj.map(v => v.name);
            console.log(date);
            lineOption.xAxis.data = date;

            const count = res.obj.map(v => v.costs);
            console.log(count);
            lineOption.series[0].data = count;
            myLine.setOption(lineOption);
        })

    </script>
</body>
</html>